<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="btn" type="button" value="播放" onclick="Onclick()">
    <br>
    <input class="input" type="text" name="" id="" value="0">
    <input  class="add" type="button" value="+1" onclick="Add()">
    <input class="min" type="button" value="-1" onclick="Min()">
    <br>
    <input class="all" type="checkbox" onclick="SelectAll()">选中全部<br>
    <input type="checkbox" class="select">选项1<br>
    <input type="checkbox" class="select">选项2<br>
    <input type="checkbox" class="select">选项3<br>
    <input type="checkbox" class="select">选项4<br>


</body>
<script>
    let btn = document.querySelector('.btn')
    // 当按钮的 value等于 播放，此时将按钮 value变成暂停
    // 否则变成播放
    function Onclick() {
        if(btn.value == "播放") {
            btn.value = "暂停"
        } else {
            btn.value = "播放"
        }
    }
    function Add() {
        let input_element = document.querySelector('.input')
        input_element.value = parseInt(input_element.value) + 1
    }

    function Min() {
        let input_element = document.querySelector('.input')
        input_element.value = parseInt(input_element.value) - 1
    }
    let all = document.querySelector('.all')
    let select = document.querySelectorAll('.select')
    console.dir(all)
    function SelectAll() {
        for(i = 0; i < select.length; i++) {
            select[i].checked = all.checked
        }
    }
    for(i = 0; i < select.length; i++) {
        select[i].onclick = function() {
            all.checked = IsSelectAll(select)
        }
    }
    function IsSelectAll(select) {
        for(i = 0; i < select.length; i++) {
            if(select[i].checked == false) {
                return false
            }
        }
        return true
    }

</script>
</html>